<template>
  <u-popup :show="visible" mode="center" @close="closeHandle" bgColor="transparent">
    <view 
      class="daily-affirmation-modal"
      :style="{backgroundImage:'url('+staticImgs.bg+')'}"
    >
      <view class="date-wrapper">
        <view class="year">{{year}}</view>
        <view class="date">{{date}}</view>
      </view>
      <view class="main-wrapper">
        <view class="text-box">{{text}}</view>
        <view class="count-wrapper">
          <view class="tip-box">您已累计打卡</view>
          <view class="count-box">
            第
            <text class="num">{{dayCount}}</text>
            天
          </view>
        </view>
        <view class="btn-box" @click="confirmHandle()">
          <text class="text">
            打卡
          </text>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  import {checkinDaily,getDailyCheckinInfo,checkUserTodyIsCheckin} from '@/common/api/dailyCheckin.js'
  import { debounce } from 'lodash'

  import {STORE_VAR} from '@/common/dict.js'
  export default{
    props:{
      confirmType:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        visible: false,
        staticImgs: {
          bg: this.imgBaseURL + '/daily/daily-modal-bg.png',
        },
        // discountUid:'',
        loading:false,
        year:this.$dayjs().format('YYYY'),//'2024',
        date:this.$dayjs().format('MM/DD'),//'01/08',
        text:'每日签到，新的希望，新的开始。',
        dayCount:0,
      }
    },
    methods:{
      show: debounce(async function(){
        if(this.loading){
          return false
        }
        this.loading = true
        const {data:wRes} = await checkinDaily()
        if(wRes.success){
          console.log('------save-----')
          uni.setStorageSync(STORE_VAR.showDailyCheckinCouponPopup,'Y')
        }
        const {data:ddRes} = await checkUserTodyIsCheckin()
        
        this.dayCount = ddRes.data.visaAllToDay || 1
        const {data:dRes} = await getDailyCheckinInfo()
        this.text = dRes.data.title
        
        this.visible = true
        setTimeout(()=>{
          this.loading = false
        },1500)

      },1000),
      confirmHandle(){
        this.visible = false
        // this.$emit('confirm')
        console.log('-----confirmType----',this.confirmType)
        if(this.confirmType ==''){
          this.$emit('closeSleep')
          uni.navigateTo({
            url:'/subcontractorC/pages/daily/dailyAffirmation'
          })
          this.$store.commit('popup/setPopupWorking',false)  
        }else if(this.confirmType =='emit'){
          console.log('confirmconfirmconfirm')
          this.$emit('confirm')
        }
      },
      refCloseHandle(){
        this.visible = false
      },
      closeHandle(){
        this.visible = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .daily-affirmation-modal{
    width: 610rpx;
    height: 830rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 106rpx 94rpx;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    
    .date-wrapper{
      margin-top: 6rpx;
      .year{
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #23CF5C;
        line-height: 56rpx;
        letter-spacing: 2rpx;
        // -webkit-text-stroke: 1px #FFFFFF;
        // text-stroke: 1px #FFFFFF;
      }
      .date{
        margin-top: -10rpx;
        font-size: 50rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #23CF5C;
        line-height: 70rpx;
        letter-spacing: 2rpx;
        // -webkit-text-stroke: 1px #FFFFFF;
        // text-stroke: 1px #FFFFFF;
      }
    }
    
    .main-wrapper{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 20rpx;
      .text-box{
        padding: 24rpx;
        
        font-size: 32rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #6B6B6C;
        line-height: 45rpx;
        letter-spacing: 1px;
      }
      .count-wrapper{
        margin-top: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        
        .tip-box{
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #6B6B6C;
          line-height: 48rpx;
          letter-spacing: 1px;
          text-align: center;
        }
        .count-box{
          text-align: center;
          margin-top: 32rpx;
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #6B6B6C;
          line-height: 48rpx;
          
          .num{
            font-size: 70rpx;
            color: #23CF5C;
            font-family: PingFang-SC-Bold, PingFang-SC;
            display: inline-block;
            margin: 0 4rpx;
          }
        }
      }
      
      .btn-box{
        margin: auto;
        margin-top: 32rpx;
        width: 280rpx;
        height: 80rpx;
        background: linear-gradient(180deg, #FFE8C7 0%, #F9C83E 100%);
        box-shadow: 0rpx 2rpx 6rpx 0rpx #BFA154;
        border-radius: 42rpx;
        line-height: 80rpx;
        text-align: center;
        
        .text{
          font-size: 34rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #B68D2B;
          line-height: 48rpx;
          letter-spacing: 1px;
          // text-shadow: 0px 2px 6px #BFA154;
        }
      }
      
    }
  }
</style>